import React, { useRef, useEffect, useState } from 'react'
import { Button, Input, List } from 'antd'



const test: React.FC = () => {
    const inputRef = useRef<HTMLInputElement>(null)
    const designInput = useRef(null)
    const [listValue, setListValue] = useState<string[]>([])

    useEffect(() => {
        if (designInput.current) {
            // console.log('inputRef', designInput.current.input.value)
        }
    }, [])
    const handleClick = () => {
        const txet = inputRef.current?.value
        if (!txet) return
        setListValue([...listValue, txet])
        inputRef.current!.value = ''
        // console.log('1333', designInput.current?.input)
    }
    return (
        <div>
            <Input placeholder="Basic usage" ref={designInput} />
            <input type="text" ref={inputRef} />
            <Button onClick={handleClick}>添加</Button>
            <List
                dataSource={listValue}
                renderItem={item => <List.Item>{item}</List.Item>}
            />
        </div>
    )
}

export default test